<template>
	<view>
		<qi-navtop></qi-navtop>
		<view class="mymianbox">
			<view class="myimg">
				<image src="../../static/logo.png"></image>
			</view>
			<view class="pancenter">
			<!--  -->
			<view class="panelgoodsmian">
			<view v-for="item in 4" class="panelgoods">
				<text>12</text>
				<view>收藏的店铺</view>
			</view>
			</view>
			<!--  -->
			<view class="panelorder">
				<view class="ordertitle">我的订单</view>
			<view class="panelist">
				<view class="paneitem "  v-for="item in mypanelist">
					<view class="iconfont" :class="item.icon"></view>
					<text>{{item.title}}</text>
				</view>
			</view>
			</view>
		<!--  -->
			<view class="panelafterbody">
					<view class="airplane" >
						<view>收货地址</view>
						<text class="iconfont icon-icon-test61"></text>
					</view>
			</view>
			</view>
		</view>
		<qi-tabbar></qi-tabbar>
	</view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import {
	reactive,
	toRefs,
	ref,
} from 'vue';
onLoad(() => {
	let token =	uni.getStorageSync('token')
		if(!token){
			uni.redirectTo({
				url:'/pages/my/login/login'
			})
		}
		});
	const data = reactive({
		mypanelist:[{
		title:'代付款',
		icon:'icon-daifukuan'
		},
		{
		title:'代收货',
		icon:'icon-daishouhuo'
		},
		{
		title:'退款/退货',
		icon:'icon-tuikuan'
		},
		{
		title:'全部订单',
		icon:'icon-icon-test9'
		}
		],
	})
	let {mypanelist} = toRefs(data)
</script>

<style lang="scss">
.mymianbox{
	.myimg{
		height: 200px;
		background-color: red;
			display: flex;
			align-items: center;
			justify-content: center;
		image{
			width: 100px;
			height: 100px;
			border-radius: 90px;
		}
	}
	.pancenter{
		padding: 0 10px;
		position: relative;
	.panelgoodsmian{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		position: relative;
		right: 0;
		left: 0;
		top: -10px;
		height: 50px;
	.panelgoods{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
	}
	}
	// 
	.panelorder{
		.ordertitle{
			height: 40px;
			line-height: 40px;
			padding-left: 10px;
			background-color: #fff;
			position: relative;
			&::after{
		  content:"";
		    position: absolute;
		    bottom:0px;
		    left:0px;
		    right:0px;
		    border-bottom:1px solid #666;
		    transform: scaleY(0.5);
		
			}
			// border-bottom: 1px solid;
		}
	
		.panelist{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80px;
			background-color: #fff;
			justify-content: space-around;
	.iconfont{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		color: red;
	}
	text{
		font-size: 14px;
	}
		}
	}
	}

	.panelafterbody{
		margin-top: 10px;
		background-color: #fff;
			.airplane{
				display: flex;
				justify-content: space-between;
				padding: 0 10px;
				height: 50px;
				align-items: center;
			}
	}
}
</style>
